<template>
   <div class="total-box">

      <div class="total-box-body">
         <div class="total-box-body-main">

            <div class="body-header">
               筛选条件:
               <div class="body-header-search" style="margin: 0px 10px;">
                  <div class="mt-4">
                     <el-input v-model="input" placeholder="请输入搜索内容" class="input-with-select">
                        <template #prepend>
                           <el-select v-model="select" placeholder="手机号" style="width: 115px">
                              <el-option label="手机号" value="手机号" />
                              <el-option label="姓名" value="姓名" />
                              <el-option label="昵称" value="昵称" />
                              <el-option label="会员卡号" value="会员卡号" />
                           </el-select>
                        </template>
                        <template #append>
                           <el-button :icon="Search" />
                        </template>
                     </el-input>
                  </div>
               </div>
               <div>
                  <el-button @click="search()" type="primary">查询</el-button>
               </div>

            </div>
            <div class="body-main">
               <div style="width: 98%;margin: 10px 0px;">
                  <el-table border :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }">
                     <el-table-column label="用户信息">
                        <template #default="scope">
                           <div style="display: flex; align-items: center">
                              <div style="width: 50px;height: 50px;">
                                 <img :src="scope.row.photo" style="height: 50px;width: 50px;" />
                              </div>
                              <div>
                                 <div style="margin-left: 10px">用户昵称:{{ scope.row.nickname }}</div>
                                 <div style="margin-left: 10px">{{ scope.row.vipcard }}</div>
                              </div>

                           </div>
                        </template>
                     </el-table-column>
                     <el-table-column prop="phone" label="手机号码" />
                     <el-table-column prop="currentBalance" label="可用余额" />
                     <el-table-column prop="currentIntegral" label="可用积分" />
                     <el-table-column label="操作">
                        <template #default="scope">
                           <div style="display: flex; align-items: center">
                              <el-text style="margin-right: 10px; cursor: pointer;" class="mx-1" type="primary"
                                 @click="opendialog(scope.row.id)">详情</el-text>
                              <el-text style="margin-right: 10px; cursor: pointer;" class="mx-1" type="primary"
                                 @click="editjifen(scope.row.id)">修改积分</el-text>
                              <el-text style="margin-right: 10px; cursor: pointer;" class="mx-1" type="primary"
                                 @click="recharge">充值</el-text>
                           </div>
                        </template>
                     </el-table-column>
                  </el-table>

               </div>
               <div class="demo-pagination-block">

                  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                     :page-sizes="[5, 10, 100, 200]" :small="small" :disabled="disabled" :background="background"
                     layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
               </div>
            </div>
         </div>
      </div>
   </div>


   <div>
      <el-dialog style=" width=80% ;" class="custom-dialog" v-model="dialogVisible" :show-header="false"
         :before-close="handleClose">
         <HuiYuanXiangQing v-if="dialogVisible"></HuiYuanXiangQing>

      </el-dialog>
      <el-dialog style=" width=80% ;" class="custom-dialog" v-model="dialogVisible1" :show-header="false"
         :before-close="handleClose">
         <Chongzhi v-if="dialogVisible1"></Chongzhi>

      </el-dialog>
   </div>
</template>

   
<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue';
import { getNumber } from '../../api/membersettingApi'
import type { TableColumnCtx } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count } = storeToRefs(store)



interface User {
   date: string
   name: string
   phone: number
   carid: string
   imgaddress: string
   balance: string
   integral: string
   photo: string
}


const input = ref('')
const select = ref('')
const currentPage = ref(1)
const pageSize = ref(5)

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
   getdata()
}
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const opendialog = (e: number) => {
   count.value = e
   console.log(count.value)
   dialogVisible.value = true
}
const editjifen = (e: number) => {
   dialogVisible1.value = true
  count.value=e
}
const handleCurrentChange = (val: number) => {
   console.log(val)
   getdata()
}


const handleClose = (done: () => void) => {
   done()
}

let tableData = reactive<User[]>([

])
onMounted(() => {
   getdata()
})
const search = () => {
   getdata()
}
let phone=ref('');
let name=ref('');
let nickname=ref('');
let vipcard=ref('');
let getdata = async () => {
   switch (select.value) {
      case '手机号': {
         phone.value='';
          name.value='';
         nickname.value='';
         vipcard.value=''; 
         phone.value=input.value;
          break;
       }
      case '姓名': { 
         phone.value='';
          name.value='';
         nickname.value='';
         vipcard.value='';
         name.value=input.value;
         break;
      }
      case '昵称': {
         phone.value='';
          name.value='';
         nickname.value='';
         vipcard.value='';
         nickname.value=input.value;

      break;
       }
      case '会员卡号': {
         phone.value='';
          name.value='';
         nickname.value='';
         vipcard.value='';
         vipcard.value=input.value;
       break;
       }
   }
   let get = await getNumber({
      limit: pageSize.value,
      page: currentPage.value,
      name: name.value,
      nickname: nickname.value,
      phone: phone.value,
      vipcard: vipcard.value,

   })
   if (get) {
      tableData.length = 0
      tableData.push(...get.data.data)
      total.value = get.data.count
      console.log(pageSize.value)
      console.log(get.data.data)
      console.log(tableData)
   }
}


watch(() => dialogVisible, val => {
   if (val) {
      getdata()
      console.log(tableData)
      console.log('更新了数据');
   }

})
let total = ref(tableData.length)



const edit = reactive(
   () => {
      console.log(2);
   })
const recharge = reactive(
   () => {
      console.log(3);
   })

</script>


<style scoped>
.body-header {
   height: 42.8px;
   line-height: 42.8px;
   width: 60%;
   display: flex;


}

.body-main {
   height: 90%;
   width: 100%;


}

.body-header-search {

   display: flex;
}





.input-with-select .el-input-group__prepend {
   background-color: var(--el-fill-color-blank);
}

:deep(.el-breadcrumb) {
   line-height: 45px;
   font-size: 16px;
}

:deep(.el-dialog__header) {
   height: 0;
   padding: 0;
}

:deep(.el-dialog) {
   border-radius: 8px
}

:deep(.el-dialog__body) {
   padding: 0
}

:deep(.el-dialog__headerbtn) {
   top: 0px
}</style>
